<template>
    <view class="pages fitment-pages">
        <u-cell-group>
            <u-cell size="large" :isLink="true" url="/pages/landlord/my/info" clickable @click="toUserProfilePage">
                <view slot="title" class="u-slot-title">
                    <view class="portrait">
                        <image :src="avatar" mode=""></image>
                    </view>

                    <view class="fullname">
                        <view class="_name">{{userInfo.nickname}}</view>
                        <view class="_edit">{{mobile}}</view>
                    </view>
                </view>
            </u-cell>
            <u-cell icon="integral-fill" title="会员商城" :isLink="true" ></u-cell>
        </u-cell-group>
        <u-gap height="5"></u-gap>
        <u-cell-group>
            <u-cell icon="integral-fill" title="信用分" value="0分"></u-cell>
            <u-cell icon="integral-fill" title="我的账户" value="0.00元"></u-cell>
            <u-cell icon="integral-fill" title="我的签章" :isLink="true" ></u-cell>
            <u-cell icon="integral-fill" title="客服电话" :isLink="true" ></u-cell>
            <u-cell icon="integral-fill" title="在线客服" :isLink="true" ></u-cell>
            <u-cell icon="integral-fill" title="用户切换" value="个人" @click="switchRole"></u-cell>
        </u-cell-group>
        <landlord-bottom-navigation-bar></landlord-bottom-navigation-bar>
    </view>
</template>

<script>
    import landlordBottomNavigationBar from "../../../components/landlord-bottom-navigation-bar";
    export default {
        name: "index",
        components:{
            landlordBottomNavigationBar
        },
        data(){
            return{

            };
        },
        computed: {
            avatar: function(){
                return this.userInfo.avatar !== '' ? this.userInfo.avatar :
                    'https://img04.sogoucdn.com/app/a/100520093/f9d5c084396d06f6-0c7006bf1d0bb8d5-2c985d6079347b6af3cbf8d0eba61c05.jpg'
            },
            userInfo: function () {
                return uni.getStorageSync('userInfo');
            },
            mobile: function() {
                let data = this.userInfo.mobile;
                console.log(data);
                if (!data) return null;
                data = data + "";
                return data ?
                    data
                        .match(/(\d{3})(\d{4})(\d{4})/)
                        .slice(1)
                        .reduce(function(value, item, index) {
                            return index === 1 ? value + "****" : value + item;
                        }) :
                    null;
            },
        },
        methods:{
            toUserProfilePage(){
                uni.navigateTo({url:'/pages/landlord/my/profile'});
            },
            switchRole(){
                uni.switchTab({url:'/pages/user/my/index'});
            }
        }
    }
</script>

<style lang="scss" scoped>
    .pages {
        width: 100%;
        min-height: 100vh;
        /*background-color: RGBA(245, 245, 245, 1);*/
        background-color: #f3f4f6;
    }

    .fullname{
        display: inline-block;
        width: 300rpx;
        height: 160rpx;
        overflow: hidden;
        margin-left: 50rpx;
        padding-top: 30rpx;
        ._name{
            font-size: 22px;
        }
        ._edit{
            font-size: 14px;
            color: #C0C0C0;
            margin-top: 20rpx;
        }
    }
    .portrait{
        width: 150rpx;
        height: 150rpx;
        border-radius: 50%;
        overflow: hidden;
        display: inline-block;
        image{
            width: 150rpx;
            height: 150rpx;
            vertical-align: middle;
        }
    }

    /deep/.u-cell{
        background-color: #ffffff;
    }
</style>